<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>监测平台</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/map.css">
</head>
<style>
    /* .amap-marker {
        padding: 0.3rem;
        border: .125rem solid #f34a07;
        border-radius: 100%;
        animation: mymove 1000ms infinite;
    } */

    @keyframes mymove {
        0% {
            /* transform:rotate(0deg); */
            padding: 0.3rem;
        }

        25% {
            padding: 0.40rem;
        }

        50% {
            padding: 0.45rem;
        }

        100% {
            padding: 0.50rem;
        }
    }

    .Equipment_state span {
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        float: left;
        margin: 0.7rem 1rem;
        border-radius: 100%;
    }

    .lanter-green {
        background: green;
    }

    .lanter-red {
        background: red;
    }
</style>

<body>
    <div class="data">
        <div class="data-title">
            <div class="title-left fl"></div>
            <div class="title-center fl" id="fullDeptName">
                监测平台
            </div>
            <div class="title-right fr"></div>
        </div>
        <div class="data-content" id="app">
            <!-- left -->
            <div class="con-left fl">
                <div class="left-top">
                    <div class="info">
                        <div class="info-title ">
                            <p class="blink">实时监测</p>
                        </div>
                        <img src="img/bj-1.png" alt="" class="bj-1">
                        <img src="img/bj-2.png" alt="" class="bj-2">
                        <img src="img/bj-3.png" alt="" class="bj-3">
                        <img src="img/bj-4.png" alt="" class="bj-4">
                        <div class="info-main">
                            <div class="info-1">
                                <div class="info-img fl">
                                    <img src="img/info-img-3.png" alt="">
                                </div>
                                <div class="info-text fl">
                                    <p>位移报警</p>
                                    <p id="moveWarnNum"></p>
                                </div>
                            </div>
                            <div class="info-2">
                                <div class="info-img fl">
                                    <img src="img/info-img-4.png" alt="">
                                </div>
                                <div class="info-text fl">
                                    <p>倾斜报警</p>
                                    <p id="leanWarnNum"></p>
                                </div>
                            </div>
                            <div class="info-3">
                                <div class="info-img fl" id="wind">
                                    <div class="windWrap">
                                        <img src="img/wind1.png" class="windFan">
                                    </div>
                                </div>
                                <div class="info-text fl">
                                    <p>风速报警</p>
                                    <p id="windWarnNum"></p>
                                </div>
                            </div>
                            <div class="info-4">
                                <div class="info-img fl">
                                    <img src="img/info-img-1.png" alt="">
                                </div>
                                <div class="info-text fl">
                                    <p>联网异常</p>
                                    <p id="netErrorNum"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="top-center">
                        <div class="title">设备详情 <span id="modem_name" style="color: chartreuse;"></span></div>
                        <img src="img/bj-1.png" alt="" class="bj-1">
                        <img src="img/bj-2.png" alt="" class="bj-2">
                        <img src="img/bj-3.png" alt="" class="bj-3">
                        <img src="img/bj-4.png" alt="" class="bj-4">
                        <table class="t_table">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>最新数据</th>
                                    <th>预警</th>
                                    <th>报警</th>
                                </tr>
                            </thead>
                            <tbody id="tbody-left2" style="overflow: scroll;">

                            </tbody>
                        </table>
                    </div>




                </div>
                <div class="top-bottom">
                    <div class="title month">近15日故障统计</div>
                    <img src="img/bj-1.png" alt="" class="bj-1">
                    <img src="img/bj-2.png" alt="" class="bj-2">
                    <img src="img/bj-3.png" alt="" class="bj-3">
                    <img src="img/bj-4.png" alt="" class="bj-4">
                    <div id="echarts_1" class="charts"></div>
                </div>
            </div>
            <!--center  -->
            <div class="con-center fl">
                <div class="map-num">
                    <ul class="map-title">
                        <li class="map-title-list">联网主机 <span id="total"></span>台</li>
                        <li class="map-title-list">预警 <span id="preNum"></span>台</li>
                        <li class="map-title-list">报警<span id="warnNum"></span>台</li>
                    </ul>
                </div>
                <div class="cen-top" id="map"></div>
                <!-- <div class="cen-top" id="container"></div> -->
                <div class="cen-bottom">
                    <div class="title">实时故障报警（近24h）</div>
                    <img src="img/bj-1.png" alt="" class="bj-1">
                    <img src="img/bj-2.png" alt="" class="bj-2">
                    <img src="img/bj-3.png" alt="" class="bj-3">
                    <img src="img/bj-4.png" alt="" class="bj-4">
                    <div id="echarts_3" class="charts">
                        <div class="content">
                            <ul class="ct-ul">
                                <li class="ct-li one">全部</li>
                                <li class="ct-li">倾斜</li>
                                <li class="ct-li">位移</li>
                                <li class="ct-li">风速</li>
                            </ul>
                            <ul class="class_tlile">
                                <li class="class_title_item">警告时间</li>
                                <li class="class_title_item">所属单位</li>
                                <li class="class_title_item">具体位置</li>
                                <li class="class_title_item">设备类型</li>
                                <li class="class_title_item">告警详情</li>
                            </ul>
                            <div class="ct-list">
                                <div class="item all">
                                    <ul class="ct-list-all">
                                        <li class="ct-list-all-list"   v-on:click="warnclick(item.location)"  v-for="(item,index) in info" :key="index">
                                            <ul class="ct-list-all-list-con">
                                                <li class="ct-list-all-list-con-list"><button
                                                        style="background: none;padding: 0 1rem;"><a href="#"
                                                            style="color: aqua;">查看</a></button>{{item.createTime}}</li>
                                                <li class="ct-list-all-list-con-list">{{item.deptName}}</li>
                                                <li class="ct-list-all-list-con-list">{{item.address}}</li>
                                                <li class="ct-list-all-list-con-list">{{item.sensorType}}</li>
                                                <li class="ct-list-all-list-con-list">{{item.msg}}</li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                                <div class="item qingxie">
                                    <ul class="ct-list-all">
                                        <li class="ct-list-all-list" v-on:click="warnclick(item.location)"
                                            v-if="item.sensorType == '倾斜'" v-for="(item,index) in info" :key="index">
                                            <ul class="ct-list-all-list-con">
                                                <li class="ct-list-all-list-con-list"><button
                                                        style="background: none;padding: 0 1rem;"><a href="#"
                                                            style="color: aqua;">查看</a></button>{{item.createTime}}</li>
                                                <li class="ct-list-all-list-con-list">{{item.deptName}}</li>
                                                <li class="ct-list-all-list-con-list">{{item.address}}</li>
                                                <li class="ct-list-all-list-con-list">{{item.sensorType}}</li>
                                                <li class="ct-list-all-list-con-list">{{item.msg}}</li>
                                            </ul>
                                        </li>

                                    </ul>
                                </div>
                                <div class="item move">
                                    <ul class="ct-list-all">
                                        <li class="ct-list-all-list" v-on:click="warnclick(item.location)"
                                            v-if="item.sensorType == '位移'" v-for="(item,index) in info" :key="index">
                                            <ul class="ct-list-all-list-con">
                                                <li class="ct-list-all-list-con-list"><button
                                                        style="background: none;padding: 0 1rem;"><a href="#"
                                                            style="color: aqua;">查看</a></button>{{item.createTime}}</li>
                                                <li class="ct-list-all-list-con-list">{{item.deptName}}</li>
                                                <li class="ct-list-all-list-con-list">{{item.address}}</li>
                                                <li class="ct-list-all-list-con-list">{{item.sensorType}}</li>
                                                <li class="ct-list-all-list-con-list">{{item.msg}}</li>
                                            </ul>
                                        </li>

                                    </ul>
                                </div>
                                <div class="item wind">
                                    <ul class="ct-list-all">
                                        <li class="ct-list-all-list" v-on:click="warnclick(item.location)"
                                            v-if="item.sensorType == '风速'" v-for="(item,index) in info" :key="index">
                                            <ul class="ct-list-all-list-con">
                                                <li class="ct-list-all-list-con-list"><button
                                                        style="background: none;padding: 0 1rem;"><a href="#"
                                                            style="color: aqua;">查看</a></button>{{item.createTime}}</li>
                                                <li class="ct-list-all-list-con-list">{{item.deptName}}</li>
                                                <li class="ct-list-all-list-con-list">{{item.address}}</li>
                                                <li class="ct-list-all-list-con-list">{{item.sensorType}}</li>
                                                <li class="ct-list-all-list-con-list">{{item.msg}}</li>
                                            </ul>
                                        </li>

                                    </ul>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- right -->
            <div class="con-right fr">
                <div class="right-top">
                    <div class="info-title ">
                        <p class="blink">健康状况</p>
                    </div>
                    <!-- <div class="title"></div> -->
                    <img src="img/bj-1.png" alt="" class="bj-1">
                    <img src="img/bj-2.png" alt="" class="bj-2">
                    <img src="img/bj-3.png" alt="" class="bj-3">
                    <img src="img/bj-4.png" alt="" class="bj-4">
                    <div id="window" class="charts">
                        <div class="report">
                            <div class="report1">
                                <p class="blink" id="okPercent">100</p>
                                <span class="blink preNum">设备健康</span>
                            </div>
                            <div class="report2">
                                <p class="blink" id="netPercent">100</p> <span class="blink warnNum">网络健康</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right-center">
                    <div class="title">24h报警设备TOP5</div>
                    <img src="img/bj-1.png" alt="" class="bj-1">
                    <img src="img/bj-2.png" alt="" class="bj-2">
                    <img src="img/bj-3.png" alt="" class="bj-3">
                    <img src="img/bj-4.png" alt="" class="bj-4">
                    <div id="echarts_5" class="charts"></div>
                </div>

                <div class="right-bottom">
                    <div class="title month">设备状态(点击查看)</div>
                    <img src="img/bj-1.png" alt="" class="bj-1">
                    <img src="img/bj-2.png" alt="" class="bj-2">
                    <img src="img/bj-3.png" alt="" class="bj-3">
                    <img src="img/bj-4.png" alt="" class="bj-4">
                    <div class="wrap">
                        <ul>
                            <li v-for="(item,index) in Equipment_state" class="Equipment_state"
                                @click.stop="Equipment_state_click(item.modemId)">
                                <p>设备名称：{{item.name}} 设备ID:{{item.modemId}} 状态：{{item.warn}} <span v-if="item.warn ==1"
                                        class="lanter-red"></span><span v-else="item.warn ==0"
                                        class="lanter-green"></span> </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/echarts.js"></script>
<script
    src="https://webapi.amap.com/maps?v=2.0&key=5c6fd83fdaed28abe41f585e52b49e5b&plugin=AMap.Scale,AMap.ToolBar"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/data/china-pp.js"></script>
<script src="js/index.js"></script>
<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
    //http://qingxie.ijingniu.cn/prod-api/biz/msgSensor/list?pageNum=1&pageSize=30&orderByColumn=msgSensorId&isAsc=desc&listType=1&type=2
    var vm = new Vue({
        el: '#app',
        data: {
            info: null,
            url: '/prod-api/biz/msgSensor/list?pageNum=1&pageSize=100&orderByColumn=msgSensorId&isAsc=desc&listType=2',
            usrUrl: '/prod-api/system/user/list?pageNum=1&pageSize=10',
            equipmentUrl: '/prod-api/biz/modem/list/',
            token: document.cookie,
            Equipment_state: '',

        },
        methods: {
            getCookie(name) {//获取缓存cookie
                var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
                if (arr = document.cookie.match(reg)) {
                    // return true;
                    return (arr[2]);
                } else {
                    return false
                }
            },
            notice() {//实施故障报警滚动通知
                var num = $(".ct-list-all").find(".ct-list-all-list").length;
                console.log(num)
                setInterval(function () {
                    $(".ct-list-all").animate(
                        {
                            marginTop: "-2rem",
                        },
                        500,
                        function () {
                            $(this)
                                .css({ marginTop: "0" })
                                .find(".ct-list-all-list:first")
                                .appendTo(this);
                        }
                    );
                }, 1500);
            },
            axiosGetData(url, callback) {//封装axios
                axios
                    .get(url, {
                        headers: {
                            "content-type": "multipart/form-data",
                            "Authorization": 'Bearer ' + this.getCookie("Admin-Token"),
                        }
                    })
                    .then(
                        function (res) {
                            if (res.data.code == 401) {
                                // alert(res.data.msg)
                                //  window.location.href = 'http://qingxie.ijingniu.cn/login?redirect=%2Fdataview'
                            }
                            callback(res)
                        })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },

            Equipment_state_click(id) {
                console.log(id)
                parent.location.href = '/biz/sensor?modemId=' + id

            }

        },
        created() {
            _this = this;
            //实时故障报警
            _this.axiosGetData(_this.url, function (res) {
                console.log('实时故障报警', res)
                _this.info = res.data.rows;
            })

        },
        mounted() {
            // this.notice()
            _this = this;

            //设备状态
            _this.$nextTick(() => {
                _this.axiosGetData(_this.equipmentUrl, function (res) {
                    console.log('设备状态', res.data.rows)
                    _this.Equipment_state = res.data.rows
                })
            })


        }

    }) 
</script>

</html>